<template>
  <div class="body">
    <NavbarTurn @func="getMsgFormSon" @func1="getMsgFormSon1" @func2="getMsgFormSon2"></NavbarTurn>
    <div :style="{marginTop: (msgFormSon+msgFormSon1+5)+ 'px'}">
    </div>
    <div class="content">
      <text class="font3">收货人</text>
      <input class="font" type="text" @change="changeName"  :value="name" placeholder="请输入收货人姓名">
    </div>
    <div class="content2">
      <text class="font3">联系电话</text>
      <input class="font" type="text" @change="changePhone" :value="phone" placeholder="请输入收货人电话">
    </div>
    <div class="content2">
      <text class="font3">所在地</text>
        <picker mode="region" @change="regionChange" :value="region">
          <view class="font">
            {{region[0]}} {{region[1]}} {{region[2]}}
          </view>
        </picker>
    </div>
    <div class="content2">
      <text class="font3">详细地址</text>
      <input class="font" type="text" @change="changeDetail" :value="detailAddress" placeholder="请输入详细地址信息">
    </div>
    <div class="content2">
      <text class="font4">设为默认地址</text>
        <view class="switch">
          <switch :checked="isDefault" @change="switchChange"/>
        </view>
    </div>
    <div class="content2" @click="showModal">
      <text class="font5">删除收货地址</text>
    </div>
    <button class="btn" @click="goBack">
      <text class="font2">确认修改</text>
    </button>
  </div>
</template>

<script>
  import NavbarTurn from "../../components/narbarTurn";
  export default {
    components: {
      NavbarTurn,
    },
    data() {
      return {
        name:"",
        phone:"",
        index: 0,
        region: ['北京市', '北京市', '东城区'],
        allAddress:[],
        maId:'',
        detailAddress:'',
        isDefault:0,
        firstDefault:0,
        isTruePhone:true,
        msgFormSon: '',
        msgFormSon1: '',
      }
    },
    onLoad: function(options) {
      this.maId = options.maId;
    },
    mounted(){
      this.$request.post({
        url: '/api/memberAddress/query',
        data: {
          'isDefault':0,
        }
      }).then(res => {
        this.allAddress = res;
        for(let i = 0 ; i < this.allAddress.length; i++){
          if(this.allAddress[i].maId == this.maId){
            this.name = this.allAddress[i].memberName;
            this.phone = this.allAddress[i].memberPhone;
            this.region[0] = this.allAddress[i].maProvince;
            this.region[1] = this.allAddress[i].maCity;
            this.region[2] = this.allAddress[i].maArea;
            this.detailAddress = this.allAddress[i].maDetail;
            this.isDefault = this.allAddress[i].isDefault;
            this.firstDefault = this.allAddress[i].isDefault;
            break;
          }}
      })
    },
    methods: {
      getMsgFormSon(data) {
        this.msgFormSon = data;
      },
      getMsgFormSon1(data) {
        this.msgFormSon1 = data;
      },
      changeName(e) {
        this.name = e.mp.detail.value;
      },
      changePhone(e) {
        console.log(e.mp.detail.value)
        this.phone = e.mp.detail.value;
        var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (!reg.test(this.phone)) {
          this.isTruePhone = false;
        } else {
          this.isTruePhone = true;
        }
      },
      changeDetail(e) {
        this.detailAddress = e.mp.detail.value;
      },
      regionChange(e) {
        console.log('picker发送选择改变，携带值为', e.mp.detail.value)
        this.region = e.mp.detail.value;
      },
      switchChange(e){
        console.log('switch发生change事件，携带值为', e.mp.detail.value)
        if(e.mp.detail.value)
          this.isDefault = 1;
        else  this.isDefault = 0;
      },
      showModal(){
        var that = this;
        wx.showModal({
          title: '提示',
          content: '确定要删除该地址吗',
          success (res) {
            if (res.confirm) {
              that.remove();
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })

      },
      remove(){
        this.$request.post({
          url: '/api/memberAddress/remove',
          data: {
            'maId':this.maId,
          }
        }).then(res => {
          wx.navigateBack({})
        })
      },
      isDefaultAddress(){
        this.$request.post({
          url: '/api/memberAddress/updateDefault',
          data: {
            'maId':this.maId,
            'isDefault':this.isDefault
          }
        }).then(res => {
        })
      },
      goBack(){
        if(this.name == ''){
          wx.showToast({
            title: '收货人姓名不能为空',
            icon: 'none',
            duration: 2000,
          });
        }else{
          if(this.isTruePhone && this.phone != ''){
            if(this.detailAddress == ''){
              wx.showToast({
                title: '详细地址不能为空',
                icon: 'none',
                duration: 2000,
              });
            }else{
              var that = this;
              this.$request.post({
                url: '/api/memberAddress/update',
                data: {
                  'maId':this.maId,
                  'maProvince':this.region[0],
                  'maCity':this.region[1],
                  'maArea':this.region[2],
                  'maDetail':this.detailAddress,
                  'memberName':this.name,
                  'memberPhone':this.phone,
                  'isDefault':this.isDefault
                }
              }).then(res => {
                if(this.firstDefault != this.isDefault){
                  that.isDefaultAddress();
                  wx.showToast({
                    title: '修改成功',
                    icon: 'none',
                    duration: 2000,
                    success: function(res) {
                      wx.navigateBack({})
                    }
                  });
                }else  {
                  wx.showToast({
                    title: '修改成功',
                    icon: 'none',
                    duration: 2000,
                    success: function(res) {
                      wx.navigateBack({})
                    }
                  });
                }
              })
            }
          } else{
            wx.showToast({
              title: '请输入正确的手机号',
              icon: 'none',
              duration: 2000,
            });
          }
        }
      }
  }
  }
</script>

<style scoped>
  .body{
    background:rgba(244,244,244,1);
    width: 100%;
    height: 100%;
  }
  .content{
    width:375px;
    height:45px;
    background-color:rgba(255,255,255,1);
    margin-top: 80px;
    display: flex;
    flex-direction: row;
  }
  .font{
    width:200px;
    height:22px;
    font-size:16px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color: rgba(102,102,102,1);
    line-height:22px;
    margin-right: 20px;
    margin-top: 11px;
  }
  .btn{
    display: flex;
    flex-direction: row;
    width:325px;
    height:36px;
    background:rgba(144,42,38,1);
    border-radius:4px;
    position:fixed;
    bottom:25px;
    left:25px;
  }
  .font2{
    height:20px;
    font-size:14px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:20px;
    margin-top:8px ;
    margin-left: 130px;
  }
  .font3{
    width: 80px;
    height:22px;
    font-size:16px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(94,95,99,1);
    line-height:22px;
    margin-left:20px;
    margin-top:11px;
  }
  .content2{
    width:375px;
    height:45px;
    background-color:rgba(255,255,255,1);
    margin-top: 4px;
    display: flex;
    flex-direction: row;
  }
  .font4{
    height:22px;
    font-size:16px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(94,95,99,1);
    line-height:22px;
    margin-left:20px;
    margin-top:11px;
  }
  .switch{
    margin-top:8px;
    margin-left: 190px;
  }
  .font5{
    height:22px;
    font-size:16px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:red;
    line-height:22px;
    margin-left:20px;
    margin-top:11px;
  }

</style>
